* {
    margin: 0;
    padding: 0;
    font-family: ziti;
}

@font-face {
    font-family: ziti;
    src: url('another/ziti.ttf');
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

a {
    text-decoration: none;
    color: black;
    -webkit-tap-highlight-color: transparent;
}

html {
    background-color: #fafafa;
}

.welcomebox {
    background-color: rgba(209, 163, 253);
    height: 12vw;
    overflow: hidden;
}

.welcometext {
    font-size: 4.5vw;
    line-height: 12vw;
    letter-spacing: 0.2vw;
}

.titlebox {
    z-index: 100;
    position: sticky;
    top: 0vw;
    background-color: rgba(250, 250, 250, 0.7);
    backdrop-filter: saturate(180%) blur(15px);

    margin: 1vw 0;
    height: 9vw;
}

.titletext {
    font-size: 4.5vw;
    color: rgb(80, 80, 80);
    line-height: 9vw;
    letter-spacing: 3vw;
    padding-left: 6vw;
}

.titletext:hover .icon {
    animation: iconflashone 1s linear;
}

@keyframes iconflashone {
    0% {
        transform: rotateZ(0deg) scale(1);
    }

    10% {
        transform: rotateZ(0deg) scale(0.7);
    }

    20% {
        transform: rotateZ(0deg) scale(0.8);
    }

    30% {
        transform: rotateZ(0deg) scale(1.0);
    }

    40% {
        transform: rotateZ(15deg) scale(1.4);
    }

    50% {
        transform: rotateZ(-15deg) scale(2.0);
    }

    60% {
        transform: rotateZ(15deg) scale(2.2);
    }

    70% {
        transform: rotateZ(-15deg) scale(2.2);
    }

    80% {
        transform: rotateZ(15deg) scale(1.8);
    }

    90% {
        transform: rotateZ(0deg) scale(1.2);
    }

    100% {
        transform: rotateZ(0deg) scale(1);
    }
}

.searchbox {
    z-index: 0;
    position: relative;
    width: 90vw;
    height: 32vw;
    border-style: solid;
    border-radius: 0.5vw;
    border-color: rgb(248, 248, 248);
    border-top-color: rgba(209, 163, 253);
    border-width: 0.5vw;
    background-color: rgb(248, 248, 248);
    margin: 0 auto 3vw;
    box-shadow: 0 0vw 2vw rgb(240, 223, 255);
    transition: all 1s;
}

.searchbox:hover {
    border-radius: 4vw;
    box-shadow: 0 1vw 3vw rgb(226, 195, 255);
}

.searchboximg {
    width: 40vw;
    margin: 0.5vw auto 0;
}

.searchboximg:hover .searchboxpic {
    transform: scale(1.5);
}

.searchboxpic {
    width: 90%;
    margin: 5%;
    transition: all 0.5s cubic-bezier(0.74, -1.92, 0, 2.78);
}

.searchboxform {
    position: absolute;
    width: 80vw;
    height: 8vw;
    left: 5vw;
    bottom: 2.5vw;
}

.searchboxinput {
    float: left;
    width: 8vw;
    height: 8vw;
    border-radius: 4vw;
    border-style: none;
    outline-style: none;
    background-color: rgb(209, 163, 253);
    box-shadow: 0 0 1vw rgb(209, 163, 253);

    color: rgb(0, 0, 0, 0);
    font-size: 3.5vw;
    text-indent: 3vw;
    letter-spacing: 0.3vw;

    transition-property: width, box-shadow, color, border-radius, background-color;
    transition-duration: 0.5s, 0.8s, 0.5s, 0.8s, 0.8s;
}

.searchboxinput:hover {
    width: 79vw;
    color: gray;
    box-shadow: 0 0 1vh rgb(209, 163, 253);
    background-color: rgb(248, 248, 248);
}

.sousuoicon {
    float: left;
    display: block;
    color: gray;

    font-size: 6vw;
    margin-top: 1vw;
    margin-left: -7vw;
    pointer-events: none;
}

.searchtext {
    z-index: -1;
    position: relative;
    top: -6vw;
    left: 12vw;
    clear: both;
    /*不受浮动元素影响*/
    float: left;
    color: rgb(80, 80, 80);
    line-height: 3.5vw;
    font-size: 4vw;
    letter-spacing: 0.8vw;
    transition: color 0.2s;
}

.searchboxinput:hover~.searchtext {
    color: rgb(248, 248, 248);
}

#steam {
    letter-spacing: 1vw;
}

.fourboxline {
    position: relative;
    width: 96vw;
    margin: 0 2vw;

    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    align-items: flex-start;
}

.litlebox {
    box-shadow: 0px 0px 3vw -1.5vw rgb(112, 112, 112);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 22vw;
    margin: 1vw 1vw;
    height: 29.6vw;
}

.smttext {
    font-size: 3.8vw;
    line-height: 8vw;
    letter-spacing: 0.5vw;
    width: 100%;
    color: #333333;
    background-color: #eeeeee;
    border-bottom: solid 0.1vw gray;
}

.boxpic {
    width: 20vw;
    padding: 0.5vw 1vw 1vw;
    transition: all 0.5s cubic-bezier(0.74, -1.92, 0, 2.78);
}

.litlebox:hover .boxpic {
    z-index: 2;
    transform: scale(1.35);
}

.line2 {
    width: 94vw;
    margin: 0 3vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.toolsboxs {
    position: relative;
    width: 45vw;
    height: 25vw;
    margin: 0.8vw 1vw;
    border-radius: 1vw;
    transition-property: all;
    transition-duration: 0.5s;
}

.toolsboxs:hover {
    opacity: 0;
    border-radius: 3vw;
}

.toolsboxtitle {
    line-height: 7vw;
    color: white;
    font-size: 4vw;
    font-weight: normal;
    letter-spacing: 0.5vw;
    margin: 2vw 3vw 0vw;
}

.toolsboxcontent {
    width: 25vw;
    height: 15vw;
    margin-left: 3vw;
    line-height: 4.2vw;
    color: rgb(235, 235, 235);
    font-size: 3vw;
    font-weight: lighter;
    letter-spacing: 0.3vw;
}

.toolsboxpic {
    position: absolute;
    bottom: 0%;
    right: 5%;
    width: 35%;
    /*background-color: rgb(20, 57, 220)*/
}

.toolsboximg {
    width: 100%;
}

#toolsbox1 {
    background-image: linear-gradient(-30deg,
            rgba(199, 125, 255, 0.8)20%,
            rgba(199, 125, 255, 0.9)50%,
            rgba(199, 125, 255, 1)70%);
}

#toolsbox2 {
    background-image: linear-gradient(-30deg,
            rgba(125, 155, 255, 0.8)20%,
            rgba(125, 155, 255, 0.9)50%,
            rgba(125, 155, 255, 1)70%);
}

#toolsbox3 {
    background-image: linear-gradient(-30deg,
            rgba(255, 144, 125, 0.8)20%,
            rgba(255, 144, 125, 0.9)50%,
            rgba(255, 144, 125, 1)70%);
}

#toolsbox4 {
    background-image: linear-gradient(-30deg,
            rgba(36, 212, 103, 0.8)20%,
            rgba(36, 212, 103, 0.9)50%,
            rgb(36, 212, 103)70%);
}

#toolsbox5 {
    background-image: linear-gradient(-30deg,
            rgba(255, 162, 193, 0.8)20%,
            rgba(255, 162, 193, 0.9)50%,
            rgb(255, 162, 193)70%);
}

#toolsbox6 {
    background-image: linear-gradient(-30deg,
            rgba(255, 162, 162, 0.8)20%,
            rgba(255, 162, 162, 0.9)50%,
            rgb(255, 162, 162)70%);
}

#toolsbox7 {
    background-image: linear-gradient(-30deg,
            rgba(0, 143, 148, 0.8)20%,
            rgba(0, 143, 148, 0.9)50%,
            rgb(0, 143, 148)70%);
}

#toolsbox8 {
    background-image: linear-gradient(-30deg,
            rgba(255, 81, 188, 0.8)20%,
            rgba(255, 81, 188, 0.9)50%,
            rgb(255, 81, 188)70%);
}

#toolsbox9 {
    background-image: linear-gradient(-30deg,
            rgba(0, 126, 88, 0.8)20%,
            rgba(0, 126, 88, 0.9)50%,
            rgb(0, 126, 88)70%);
}